<template>
    <div>
        <!-- layout 属性决定显示的部分 -->
        <el-pagination
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[2, 5, 10, 20]"
            :total="total"
        >
        </el-pagination>
        <el-table :data="postList">
            <el-table-column
                prop="id"
                label="ID编号"
                width="100"
            ></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column
                prop="user.nickname"
                label="作者"
                width="100"
            ></el-table-column>
            <el-table-column label="缩略图" width="200">
                <template slot-scope="scope">
                    <img
                        v-if="scope.row.cover.length > 0"
                        class="thumbnail"
                        :src="scope.row.cover[0].url | fixImgUrl"
                        alt=""
                    />
                    <img
                        v-else
                        class="thumbnail"
                        src="@/assets/logo.png"
                        alt=""
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button
                        size="small"
                        type="warning"
                        @click="$router.push('/editpost?id=' + scope.row.id)"
                        >编辑</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pageIndex: 1,
                pageSize: 2,
                postList: [],
                total: 0,
            };
        },
        created() {
            this.loadPage();
        },
        methods: {
            currentChange(newPageIndex) {
                this.pageIndex = newPageIndex;
                this.loadPage();
            },
            sizeChange(newPageSize) {
                this.pageSize = newPageSize;
                this.loadPage();
            },
            loadPage() {
                this.$axios({
                    url: "/post",
                    params: {
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                    },
                }).then((res) => {
                    console.log(res.data);
                    this.postList = res.data.data;
                    this.total = res.data.total;
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    .thumbnail {
        width: 100%;
        height: 120px;
        object-fit: cover;
    }
</style>